<template>
  <!--  <header class="joe_header current active">-->
  <header class="joe_header active">
    <div class="joe_header__above">
      <div class="joe_container">
        <svg @click="joeHeaderSlideout('joe_header__slideout active','joe_header__mask active slideout')"
             class="joe_header__above-slideicon" viewBox="0 0 1152 1024" xmlns="http://www.w3.org/2000/svg" width="20"
             height="20">
          <path
            d="M76.032 872a59.968 59.968 0 1 0 0 120h999.936a59.968 59.968 0 1 0 0-120H76.032zm16-420.032a59.968 59.968 0 1 0 0 120h599.936a59.968 59.968 0 1 0 0-119.936H92.032zM76.032 32a59.968 59.968 0 1 0 0 120h999.936a60.032 60.032 0 0 0 0-120H76.032z"></path>
        </svg>
        <router-link title="June 12" class="joe_header__above-logo" to="/articleHome">
          <img class="ls-is-cached lazyloaded" :src="logo" alt="June 12">
        </router-link>
        <nav class="joe_header__above-nav">
          <router-link
            to="/articleHome"
            :class="key() === '/articleHome' ? 'item active' : 'item'"
          >
            <svg-icon icon-class="articleHome"/>
            首 页
          </router-link>
          <router-link
            to="/articleSort"
            :class="key() === '/articleSort' ? 'item active' : 'item'"
          >
            <svg-icon icon-class="articleSort"/>
            分 类
          </router-link>
          <!--          <router-link-->
          <!--            to="/articleLable"-->
          <!--            :class="key() === '/articleLable' ? 'item active' : 'item'"-->
          <!--          >-->
          <!--            <svg-icon icon-class="articleLable"/>-->
          <!--            标 签-->
          <!--          </router-link>-->
          <router-link
            to="/articleArchive"
            :class="key() === '/articleArchive' ? 'item active' : 'item'"
          >
            <svg-icon icon-class="articleArchive"/>
            归 档
          </router-link>
          <router-link
            to="/friendLinks"
            :class="key() === '/friendLinks' ? 'item active' : 'item'"
          >
            <svg-icon icon-class="friendLinks"/>
            友 链
          </router-link>
          <router-link
            to="/meiTu"
            :class="key() === '/meiTu' ? 'item active' : 'item'"
          >
            <svg-icon icon-class="meiTu"/>
            壁 纸
          </router-link>
          <router-link
            to="/articleAboutMe"
            :class="key() === '/articleAboutMe' ? 'item active' : 'item'"
          >
            <svg-icon icon-class="articleAboutMe"/>
            关 于
          </router-link>
          <router-link
            to="/leavingMessage"
            :class="key() === '/leavingMessage' ? 'item active' : 'item'"
          >
            <svg-icon icon-class="leavingMessage"/>
            留 言
          </router-link>
          <router-link
            to="/tools"
            :class="key().indexOf('/tools') < 0 ? 'item' : 'item active'"
          >
            <svg-icon icon-class="tool"/>
            工 具
          </router-link>
        </nav>
        <div class="joe_header__above-search">
          <input v-model="globalSearchValue" maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="s" value=""
                 class="input"
                 type="text" @blur="initSearchRecommend('result')" @focus="initSearchRecommend('result active')">
          <button class="submit" v-if="!globalSearchValue" @click="searchTips">
            搜索
          </button>
          <router-link :to="'/globalSearch/'+globalSearchValue" v-else>
            <button class="submit">
              搜索
            </button>
          </router-link>
          <span class="icon"></span>
          <nav :class="searchRecommendCss">
            <template v-for="(top5,index) in articleTop5Data">
              <router-link :to="'/articleDetails/'+top5.id" :title="top5.title" class="item">
                <span class="sort">{{ index + 1 }}</span>
                <span class="text">{{ top5.title }}</span>
                <span class="views">{{ top5.viewsNum }} 阅读</span>
              </router-link>
            </template>


          </nav>
        </div>
        <svg
          @click="showHeaderSearchout"
          class="joe_header__above-searchicon"
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
        >
          <path
            d="M1008.19 932.031L771.72 695.56a431.153 431.153 0 1 0-76.158 76.158l236.408 236.472a53.758 53.758 0 0 0 76.158 0 53.758 53.758 0 0 0 0-76.158zM107.807 431.185a323.637 323.637 0 0 1 323.316-323.381 323.7 323.7 0 0 1 323.381 323.38 323.637 323.637 0 0 1-323.38 323.317 323.637 323.637 0 0 1-323.317-323.316z"></path>
        </svg>
      </div>
    </div>

    <div class="joe_header__below" style="border-top: 1px solid #ebeef5">
      <div class="joe_container">
        <nav class="joe_header__below-class">
          <p class="item">
            <weather/>
          </p>
          <template v-for="item in sortTop5Data">
            <a class="item" :href="'/articleSortList/'+item.id" :title="item.name">{{ item.name }}</a>
          </template>
        </nav>
        <div class="joe_header__below-sign">
          <div class="item">
            <svg v-if="showLoginBtn() && isLogin === '1'" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                 width="15" height="15">
              <path
                d="M710.698 299a213.572 213.572 0 1 0-213.572 213.954A213.572 213.572 0 0 0 710.698 299zm85.429 0a299.382 299.382 0 1 1-299-299 299 299 0 0 1 299 299z"></path>
              <path
                d="M114.223 1024a46.91 46.91 0 0 1-46.91-46.91 465.281 465.281 0 0 1 468.332-460.704 475.197 475.197 0 0 1 228.827 58.35 46.91 46.91 0 1 1-45.384 82.378 381.378 381.378 0 0 0-183.443-46.909 371.08 371.08 0 0 0-374.131 366.886A47.29 47.29 0 0 1 114.223 1024zM944.483 755.129a38.138 38.138 0 0 0-58.733 0l-146.449 152.55-92.675-91.53a38.138 38.138 0 0 0-58.732 0 43.858 43.858 0 0 0 0 61.402l117.083 122.422a14.492 14.492 0 0 0 8.39 4.577c4.196 0 4.196 4.195 8.39 4.195h32.037c4.195 0 4.195-4.195 8.39-4.195s4.195-4.577 8.39-4.577L946.39 816.15a48.054 48.054 0 0 0-1.906-61.02z"></path>
              <path d="M763.328 776.104L730.53 744.45a79.708 79.708 0 0 0 32.798 31.654"></path>
            </svg>
            <a v-if="showLoginBtn() && isLogin === '1'" @click="login" rel="noopener noreferrer nofollow">登录</a>

            <a-dropdown v-if="!showLoginBtn()">
              <a class="ant-dropdown-link" @click.prevent>
                写文章
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <router-link to="/writeArticle/articleHome/1">
                      MD编辑器
                    </router-link>
                  </a-menu-item>
                  <a-menu-item>
                    <router-link to="/writeArticle/articleHome/2">
                      富文本编辑器
                    </router-link>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            <router-link to="/articlePersonal" style="margin-left: 10px" v-if="!showLoginBtn()">
              个人中心
            </router-link>
            <router-link to="/dashboard" style="margin-left: 10px" v-if="!showLoginBtn()">
              后台管理
            </router-link>
            <a @click="logout" style="margin-left: 10px" v-if="!showLoginBtn()">
              退 出
            </a>
          </div>

        </div>
      </div>
    </div>
    <!--  手机端 搜索  -->
    <div :class="headerSearchoutCss">
      <div class="joe_container">
        <div class="joe_header__searchout-inner">
          <div class="search">
            <input v-model="globalSearchValue" maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="s"
                   value="" class="input"
                   type="text"
            >
            <!--            <a :href="'/globalSearch/'+globalSearchValue">-->
            <!--              <button class="submit">-->
            <!--                Search-->
            <!--              </button>-->
            <!--            </a>-->
            <button class="submit" v-if="!globalSearchValue" @click="searchTips">
              Search
            </button>
            <a :href="'/globalSearch/'+globalSearchValue" v-else>
              <button class="submit">
                Search
              </button>
            </a>
          </div>
          <div class="title">
            <svg class="icon" viewBox="0 0 1445 1024" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
              <path
                d="M1055.021 277.865a348.762 348.762 0 0 1 348.401 348.341c0 178.96-136.132 327.68-311.778 346.172l-758.603 2.35A291.238 291.238 0 0 1 42.165 683.79a291.238 291.238 0 0 1 273.227-290.334 369.242 369.242 0 0 1 368.4-351.292 370.568 370.568 0 0 1 344.184 236.905c9.336-.783 18.19-1.205 27.045-1.205zM683.791 156.25a255.036 255.036 0 0 0-254.735 254.796V507h-95.955a177.032 177.032 0 0 0-176.79 176.791 177.032 177.032 0 0 0 176.79 176.85h721.98a234.677 234.677 0 0 0 234.316-234.435 234.616 234.616 0 0 0-234.316-234.255 234.616 234.616 0 0 0-234.315 234.315v18.07H706.56v-18.07A348.4 348.4 0 0 1 915.817 307.2a255.578 255.578 0 0 0-232.026-151.01z"></path>
            </svg>
            标签搜索
          </div>
          <ul class="cloud">
            <template v-for="lable in articleLableList">
              <li class="item">
                <a
                  :style="{background: getColor()}"
                  :href="'/articleLableList/'+lable.id"
                >
                  {{ lable.value }}
                </a>
              </li>
            </template>

          </ul>
        </div>
      </div>
    </div>
    <!--  手机端 菜单  -->
    <div :class="joeHeaderSlideoutCss">
      <img width="100%" height="150" class="joe_header__slideout-image"
           src="@/assets/images/user-background-img.jpg" alt="侧边栏壁纸">
      <div class="joe_header__slideout-author">
        <img width="50" height="50" class="avatar lazyload" src="@/assets/avatar/right-avatar.jpg" alt="博主昵称">
        <div class="info">
          <a class="link" href="/personalHome/chenshuang" rel="noopener noreferrer nofollow">
            Mr. Chen</a>
          <p class="motto joe_motto">不怕学问浅，就怕志气短。</p>
        </div>
      </div>
      <ul class="joe_header__slideout-count">
        <li class="item">
          <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
            <path
              d="M606.227 985.923H164.75c-69.715 0-126.404-56.722-126.404-126.442V126.477C38.346 56.755 95.04 0 164.75 0h619.275c69.715 0 126.549 56.755 126.549 126.477v503.925c0 18.216-14.814 32.997-33.07 32.997-18.183 0-32.925-14.78-32.925-32.997V126.477c0-33.355-27.2-60.488-60.554-60.488H164.75c-33.353 0-60.41 27.133-60.41 60.488v733.004c0 33.353 27.057 60.441 60.41 60.441h441.477c18.183 0 32.925 14.787 32.925 33.004 0 18.211-14.742 32.997-32.925 32.997zm0 0"></path>
            <path
              d="M657.62 322.056H291.154c-18.183 0-32.924-14.786-32.924-33.003 0-18.21 14.74-32.998 32.924-32.998H657.62c18.256 0 33.07 14.787 33.07 32.998 0 18.217-14.814 33.003-33.07 33.003zm0 0M657.62 504.749H291.154c-18.183 0-32.924-14.78-32.924-32.993 0-18.222 14.74-32.997 32.924-32.997H657.62c18.256 0 33.07 14.775 33.07 32.997 0 18.218-14.814 32.993-33.07 32.993zm0 0M445.611 687.486H291.154c-18.183 0-32.924-14.78-32.924-33.004 0-18.21 14.74-32.991 32.924-32.991h154.457c18.184 0 32.998 14.78 32.998 32.991 0 18.224-14.814 33.004-32.998 33.004zm0 0M866.482 1024c-8.447 0-16.896-3.225-23.34-9.662L577.595 748.786c-7.156-7.123-10.592-17.07-9.446-27.056l8.733-77.728c1.788-15.321 13.885-27.378 29.2-29.06l77.45-8.52c10.443-.965 19.9 2.433 26.905 9.449l265.558 265.551c12.875 12.877 12.875 33.784 0 46.666l-86.184 86.25c-6.438 6.437-14.887 9.662-23.33 9.662zm-231.05-310.646l231.05 231.018 39.575-39.62-231.043-231.05-35.505 3.938-4.076 35.714zm0 0"></path>
          </svg>
          <span>累计撰写 <strong>{{ statisticsTopNumData.articleCount }}</strong> 篇文章</span>
        </li>
        <li class="item">
          <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
            <path
              d="M921.6 153.6H102.4A102.4 102.4 0 0 0 0 256v512a102.4 102.4 0 0 0 102.4 102.4h819.2A102.4 102.4 0 0 0 1024 768V256a102.4 102.4 0 0 0-102.4-102.4zM687.616 473.088L972.8 258.304V791.04zM960 204.8L527.104 527.36 73.216 204.8zM371.2 483.584l-320 287.232V256zM73.984 819.2l339.2-307.2 83.456 59.392a51.2 51.2 0 0 0 60.416 0l89.6-67.328L931.072 819.2z"></path>
          </svg>
          <span>累计阅读 <strong>{{ statisticsTopNumData.viewcount }}</strong> 次</span>
        </li>
      </ul>
      <ul class="joe_header__slideout-menu panel-box">


        <li @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')">
          <router-link
            to="/articleHome"
            class="link"
          >
            首页
          </router-link>
        </li>

        <!-- 页面 -->
        <li @click="linkSortFlag = !linkSortFlag">
          <a :class="linkSortFlag ? 'link panel ' : 'link panel in'" href="#" rel="nofollow">
            <span>分类</span>
            <svg class="icon" viewBox="0 0 1024 1024"
                 xmlns="http://www.w3.org/2000/svg"
                 width="13" height="13">
              <path
                d="M624.865 512.247L332.71 220.088c-12.28-12.27-12.28-32.186 0-44.457 12.27-12.28 32.186-12.28 44.457 0l314.388 314.388c12.28 12.27 12.28 32.186 0 44.457L377.167 848.863c-6.136 6.14-14.183 9.211-22.228 9.211s-16.092-3.071-22.228-9.211c-12.28-12.27-12.28-32.186 0-44.457l292.155-292.16z"></path>
            </svg>
          </a>
          <ul class="slides panel-body" :style="linkSortFlag ? 'display: none;' : 'display: block;'">
            <template v-for="sort in sortStatisticsData">
              <li @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')">
                <router-link
                  :to="'/articleSortList/'+sort.id"
                  class="link"
                >
                  {{ sort.name }} ({{ sort.value }})
                </router-link>
              </li>
            </template>

          </ul>
        </li>

        <!-- 页面 -->
        <li @click="linkPageFlag = !linkPageFlag">
          <a :class="linkPageFlag ? 'link panel ' : 'link panel in'" href="#" rel="nofollow">
            <span>页面</span>
            <svg class="icon" viewBox="0 0 1024 1024"
                 xmlns="http://www.w3.org/2000/svg"
                 width="13" height="13">
              <path
                d="M624.865 512.247L332.71 220.088c-12.28-12.27-12.28-32.186 0-44.457 12.27-12.28 32.186-12.28 44.457 0l314.388 314.388c12.28 12.27 12.28 32.186 0 44.457L377.167 848.863c-6.136 6.14-14.183 9.211-22.228 9.211s-16.092-3.071-22.228-9.211c-12.28-12.27-12.28-32.186 0-44.457l292.155-292.16z"></path>
            </svg>
          </a>
          <ul class="slides panel-body" :style="linkPageFlag ? 'display: none;' : 'display: block;'">

            <li
              @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')"
            >
              <router-link
                to="/articleArchive"
                class="link"
              >
                归 档
              </router-link>
            </li>
            <li
              @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')"
            >
              <router-link to="/friendLinks"
                           class="link"
              >
                友 链
              </router-link>
            </li>
            <li
              @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')"
            >
              <router-link
                to="/meiTu"
                class="link"
              >
                壁 纸
              </router-link>
            </li>
            <li
              @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')"
            >
              <router-link to="/articleAboutMe"
                           class="link"
              >
                关 于
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="joe_header__slideout-menu panel-box" style="margin-top: 15px; " v-if="!showLoginBtn()">
        <li @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')">
          <router-link class="link panel" to="/dashboard" rel="nofollow"
          >
            <span>管理系统</span>
            <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
              <path
                d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z"></path>
              <path
                d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z"></path>
              <path
                d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z"></path>
            </svg>
          </router-link>
        </li>
      </ul>
      <ul class="joe_header__slideout-menu panel-box" style="margin-top: 15px; " v-if="!showLoginBtn()">
        <li @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')">
          <router-link class="link panel" to="/personalData" rel="nofollow"
          >
            <span>个人中心</span>
            <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
              <path
                d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z"></path>
              <path
                d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z"></path>
              <path
                d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z"></path>
            </svg>
          </router-link>
        </li>
      </ul>
      <ul class="joe_header__slideout-menu panel-box" style="margin-top: 15px; " v-if="!showLoginBtn()">
        <li @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')">
          <router-link class="link panel" to="/douYinTool" rel="nofollow"
          >
            <span>抖音工具</span>
            <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
              <path
                d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z"></path>
              <path
                d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z"></path>
              <path
                d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z"></path>
            </svg>
          </router-link>
        </li>
      </ul>
      <ul class="joe_header__slideout-menu panel-box" style="margin-top: 15px; " v-if="showLoginBtn()">
        <li @click="login">
          <a class="link panel" href="#" rel="nofollow">
            <span>用户登录</span>
            <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
              <path
                d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z"></path>
              <path
                d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z"></path>
              <path
                d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z"></path>
            </svg>
          </a>
        </li>
      </ul>
      <ul class="joe_header__slideout-menu panel-box" style="margin-top: 15px; " v-if="!showLoginBtn()">
        <li @click="logout">
          <a class="link panel" href="#" rel="nofollow">
            <span>退出登录</span>
            <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
              <path
                d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z"></path>
              <path
                d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z"></path>
              <path
                d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z"></path>
            </svg>
          </a>
        </li>
      </ul>
    </div>
    <!--  手机端 遮罩层  -->
    <div :class="joeHeaderMaskCss"
         @click="joeHeaderMask('joe_header__slideout','joe_header__mask','joe_header__searchout')"></div>

  </header>
</template>

<script>
import {getAction} from "@/api/manage";
import {getToken} from "@/utils/auth";
const settings = require('@/settings.js')

import weather from "./weather"

export default {
  name: "AntsHeader",
  components: {
    weather
  },
  inject: ['reload'],
  data() {
    return {
      logo: '',
      isLogin: true,
      url: {
        searchAllActive: '/articleView/searchAllActive',
        getSortTop5: '/articleView/getSortTop5',
        statisticsTopNum: '/articleView/statisticsTopNum',
        sortStatisticsChart: '/articleView/sortStatisticsChart',
        initArticleLable: '/articleView/getLableStatistics',
        getArticleTop5ByViewNum: '/articleView/getArticleTop5ByViewNum',
      },
      joeHeaderSlideoutCss: 'joe_header__slideout',
      joeHeaderMaskCss: 'joe_header__mask',
      searchRecommendCss: 'result',
      headerSearchoutCss: 'joe_header__searchout',
      sortTop5Data: [],
      statisticsTopNumData: {},
      linkPageFlag: true,
      linkSortFlag: true,
      sortStatisticsData: [],
      articleLableList: [],
      globalSearchValue: '',
      articleTop5Data: [],

    }
  },
  mounted() {
    let sysConfig = JSON.parse(window.localStorage.getItem(settings.ants_sys_config_storage_key))
    if (sysConfig) {
      this.logo = sysConfig.logo_url
      this.isLogin = sysConfig.is_login
    }
    this.getSortTop5()

    this.getSortStatisticsChart()
    this.getArticleTop5ByViewNum()
  },
  methods: {
    // 获取随机色
    getColor() {
      let r = parseInt(Math.random() * 256)
      let g = parseInt(Math.random() * 256)
      let b = parseInt(Math.random() * 256)
      let color = `rgba(${r},${g},${b},0.9)`
      return color
    },
    // 显示菜单栏
    joeHeaderSlideout(joeHeaderSlideoutCss, joeHeaderMaskCss) {
      this.joeHeaderSlideoutCss = joeHeaderSlideoutCss
      this.joeHeaderMaskCss = joeHeaderMaskCss
      this.initStatisticsTopNum()
    },
    // 隐藏遮罩层
    joeHeaderMask(joeHeaderSlideoutCss, joeHeaderMaskCss, headerSearchoutCss) {
      this.joeHeaderSlideoutCss = joeHeaderSlideoutCss
      this.joeHeaderMaskCss = joeHeaderMaskCss
      this.headerSearchoutCss = headerSearchoutCss
    },
    initSearchRecommend(css) {
      this.searchRecommendCss = css
    },
    getSortTop5() {
      getAction(this.url.getSortTop5, {}).then(res => {
        if (res.success) {
          this.sortTop5Data = res.result
        }
      })
    },
    key() {
      return this.$route.path
    },
    initStatisticsTopNum() {
      getAction(this.url.statisticsTopNum, {}).then(res => {
        if (res.success) {
          this.statisticsTopNumData = res.result
        }
      })
    },
    getSortStatisticsChart() {
      getAction(this.url.sortStatisticsChart, {}).then(res => {
        if (res.success) {
          this.sortStatisticsData = res.result
        }
      })
    },
    // 显示或隐藏手机端顶部搜索
    showHeaderSearchout() {
      if (this.headerSearchoutCss === 'joe_header__searchout') {
        this.initArticleLable()
        this.joeHeaderMaskCss = 'joe_header__mask active'
        this.headerSearchoutCss = 'joe_header__searchout active'
      } else {
        this.joeHeaderMaskCss = 'joe_header__mask'
        this.headerSearchoutCss = 'joe_header__searchout'
      }

    },
    // 初始化文章分类
    initArticleLable() {
      getAction(this.url.initArticleLable, {
        'username': ''
      }).then(res => {
        if (res.success) {
          this.articleLableList = res.result
        }
      })
    },
    searchTips() {
      this.$message.warning("请输入要搜索的内容！")
    },
    getArticleTop5ByViewNum() {
      this.articleTop5Data = []
      getAction(this.url.getArticleTop5ByViewNum, {}).then(res => {
        if (res.success) {
          this.articleTop5Data = res.result
        }
      })
    },
    login() {
      this.$emit('toLogin')
    },
    logout() {
      var _this = this
      this.$antdconfirm({
        title: '系统提示！',
        content: '是否要退出登录。',
        onOk() {
          _this.doLogout()
        },
        onCancel() {
        }
      })
    },
    showLoginBtn() {
      var token = getToken()
      if (!token) {
        return true
      }
      return false
    },
    async doLogout() {
      await this.$store.dispatch('user/logout')
      await this.reload()
    },
  }
}
</script>

<style scoped>

</style>
